<template>
<div>
    <Form ref="formInline" :model="data.data" :rules="ruleInline">
        <FormItem prop="user">
            <Input type="text" v-model="data.user" placeholder="请输入用户名">
            <img :src="user" alt="" slot="prepend">
                        </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="data.password" placeholder="请输入密码">
            <img :src="pass" alt="" slot="prepend">
                        </Input>
        </FormItem>
        <FormItem prop="code">
            <div class="vcode">
                <Input v-model="data.code" placeholder="请输入验证码"></Input>
                <span class="vcode-title" ></span>
                <span class="vcodeclick" >换一张</span>
            </div>
</FormItem>
<FormItem prop="password">
    <Checkbox v-model="data.interest">记住密码</Checkbox>
</FormItem>

<FormItem>
    <Button type="primary" class="btn" @click="handleLogin">登录</Button>
</FormItem>
</Form>
</div>
</template>

<script>
export default {
    props: ['data'],
    data() {
        return {
            user: require('@/assets/images/user.png'),
            pass: require('@/assets/images/password.png'),

            ruleInline: {}
        }
    },
    methods: {
        handleLogin() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.data);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })

            // console.log(this.data)
        }
    },
}
</script>

<style lang="less" scoped>
.btn {
    width: 100%;
    padding: 8px;
}
.vcode {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;

    .ivu-input-wrapper {
        width: 320px;
    }

    .vcode-title {
        display: block;
        width: 110px;
        height: 32px;
        border: 1px solid #AEC0DA;
        text-align: center;
        line-height: 32px;
        margin: 0 15px;
    }

    .vcodeclick {
        color: #398BEF;
        cursor: pointer;
    }

}
</style>
